I'm kinda new to Vue3 and encountered such problem in one project. Below are my pseudo code blocks:

nested variable declaration:

const testData = ref([
    {
      type: '',
      title: '',
      data: {
        labels: [] as string[],
        datasets: [
          {
            type: '',
            label: '',
            data: [] as number[],
          },
        ],
      },
    },
  ]) 

and here is where the error thrown

 GetData().then(response=>{
    if(response != undefined){
            response.result.forEach(value=>{
              testData.value[0].data.datasets[0].data.push(value)//this line throws out the error 
            })
    }
         ...  
 }).catch(err=>console.log(err))        

and the error message lies below:

RangeError: Maximum call stack size exceeded
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)

According to other online articles, they all said this error happens because the loop, but here the foreach loop only has to loop less than 15 times, and once I changed the testData into a plain array without using ref(), everything just worked fine and the final result got rendered as what I was expecting. Can somebody just tell me the reason?